<script setup>
import { ref } from "vue";
import bag from "../assets/mybag/bag-container.png";
import { http } from "../services/service";
import { useUserStore } from "../store/index";

import cardSell from "./components/cardSell.vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const store = useUserStore();
const active = ref(0);
const activeBuyCard = ref(0);
const activeSellCard = ref(0);

const cards = ref([]);
const background = `url(${bag})`;
const fromAds = router.currentRoute.value.query?.fromAds;
if (fromAds) {
  active.value = fromAds === "sell" ? 1 : 0;
}
const onClickBuyTab = (e) => {
  currentPage.value = 0;
  cards.value = [];
  getAdsLists("buy", e.name + 1);
};
function getData() {
  currentPage.value = 0;
  if (active.value === 0) {
    getAdsLists("buy", activeBuyCard.value + 1);
  }
  if (active.value === 1) {
    getAdsLists("sell", activeSellCard.value + 1);
  }
}
const getAdsLists = (action, cardTypeId) => {
  currentPage.value++;
  http
    .get(
      `/api/v1/center/myAd?telegramId=${store?.getUser?.telegramId}&adType=${action}&cardTypeId=${cardTypeId}&page=${currentPage.value}`
    )
    .then(
      (response) => {
        const data = response?.data?.data;
        if (currentPage.value === 1) {
          cards.value = data.adList || [];
        } else {
          cards.value = [...cards.value, ...data.adList];
        }
        loading.value = false;
        if (data.totalPages === currentPage.value || data.totalPages === 0) {
          finished.value = true;
        }
      },
      () => {}
    );
};

const onClickType = ({ name }) => {
  currentPage.value = 0;
  cards.value = [];
  if (name === 0) {
    getAdsLists("buy", activeBuyCard.value + 1);
  } else {
    getAdsLists("sell", activeSellCard.value + 1);
  }
};

const onClickSellTab = (e) => {
  currentPage.value = 0;
  cards.value = [];
  getAdsLists("sell", e.name + 1);
};
const back = () => {
  router.go(-1);
};

const currentPage = ref(0);

const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  if (active.value === 0) {
    getAdsLists("buy", activeBuyCard.value + 1);
  }
  if (active.value === 1) {
    getAdsLists("sell", activeSellCard.value + 1);
  }
};
</script>

<template>
  <div class="container">
    <div class="title">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="25"
        @click="back()"
      />{{ $t("my_realse") }}
    </div>
    <div class="tab-container">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="$t('no_more')"
        :loading-text="$t('loading')"
        @load="onLoad"
        :offset="0"
      >
        <van-tabs
          v-model:active="active"
          :background="background"
          @click-tab="onClickType"
          color="#4A61F9"
          title-active-color="#fff"
          title-inactive-color="#9699A2"
        >
          <van-tab :title="$t('buy')">
            <div style="margin-top: 20px">
              <van-tabs
                @click-tab="onClickBuyTab"
                v-model:active="activeBuyCard"
                background="unset"
                color="unset"
                title-active-color="#4A61F9"
                title-inactive-color="#9699A2"
              >
                <van-tab :title="$t('upperFour')">
                  <cardSell
                    :cards="cards"
                    type="sell"
                    :isMyAd="true"
                    @refresh="getData"
                  ></cardSell>
                </van-tab>
                <van-tab :title="$t('middleFour')">
                  <cardSell
                    :cards="cards"
                    type="sell"
                    :isMyAd="true"
                    @refresh="getData"
                  ></cardSell>
                </van-tab>
                <van-tab :title="$t('lowerFour')">
                  <cardSell
                    :cards="cards"
                    type="sell"
                    :isMyAd="true"
                    @refresh="getData"
                  ></cardSell>
                </van-tab>
              </van-tabs>
            </div>
          </van-tab>
          <van-tab :title="$t('sell')">
            <div style="margin-top: 20px">
              <van-tabs
                v-model:active="activeSellCard"
                background="unset"
                color="unset"
                @click-tab="onClickSellTab"
                title-active-color="#4A61F9"
                title-inactive-color="#9699A2"
              >
                <van-tab :title="$t('upperFour')">
                  <cardSell
                    :cards="cards"
                    type="buy"
                    :isMyAd="true"
                    @refresh="getData"
                  ></cardSell>
                </van-tab>
                <van-tab :title="$t('middleFour')">
                  <cardSell
                    :cards="cards"
                    type="buy"
                    :isMyAd="true"
                    @refresh="getData"
                  ></cardSell>
                </van-tab>
                <van-tab :title="$t('lowerFour')">
                  <cardSell
                    :cards="cards"
                    type="buy"
                    :isMyAd="true"
                    @refresh="getData"
                  ></cardSell>
                </van-tab>
              </van-tabs>
            </div>
          </van-tab>
        </van-tabs>
      </van-list>
    </div>
  </div>
</template>

<style scoped lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.title {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 8px;
    cursor: pointer;
  }

  font-size: 17px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.block {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.tab-container {
  margin: 0 auto;
  padding-top: 20px;
  width: 80%;
}
</style>
